<template>
	<view>
		<calendar @onDayClick = "getDate"></calendar>
	</view>
	<view class="task-body">
		<view v-for="(task, index) in taskList" :key="index" class="task-content">
			<view class="task-left">
				<view class="task-name">{{task.inspectionWork.inspectionWorkName}}</view>
				<view class="task-area">区域：{{task.map.mapName}}</view>
				<view class="task-status">
					<view>状态：</view>
					<view>
						<view style="color: #0A60BD;" v-if="task.inspectionWork.inspectionWorkStatus === 0">处理中</view>
						<view style="color: red;"  v-else-if="task.inspectionWork.inspectionWorkStatus === 1">已超时</view>
						<view style="color: #4CAF50;" v-else-if="task.inspectionWork.inspectionWorkStatus === 2">已完成</view>
						<view style="color: grey;"  v-else-if="task.inspectionWork.inspectionWorkStatus === 3">已取消</view>
						<view style="color: grey;" v-else-if="task.inspectionWork.inspectionWorkStatus === 4">未开始</view>
						<view v-else>未知状态</view>
					</view>
				
				</view>
				<view class="task-botom">
					<view class="task-schedule">
						进度：{{task.inspectionWork.inspectionWorkFinish}}/{{task.inspectionWork.inspectionWorkNumber}}
					</view>
					<view class="task-time">
						<view class="time-start">
							开始时间：{{formatDate(task.inspectionWork.inspectionStartTime)}}
						</view>
						<view class="time-end">限定完成时间：{{task.inspectionWork.inspectionLimitTime}}小时</view>
					</view>
				</view>
			</view>
			<view class="task-right" @tap="goToTaskInfo(task)">详情-></view>
		</view>
		<view class="tips">没有更多数据了</view>
	</view>
</template>

<script>
	import request from '@/common/request.js'
	export default {
		data() {
			return {
				taskList:[],
				userInfo : uni.getStorageSync('userInfo'),
				date:"",
			}
		},
		onShow() {
			console.log(this.userInfo)
			this.date = this.curDate()
			this.getTasks(this.date)

		},
		methods: {
			formatDate(dateString) {
				dateString = dateString.replace(" ", "+")
				const timestamp = Date.parse(dateString);
				
				if (isNaN(timestamp)) {
				  console.log("无效时间");
				  return "无效时间"
				} else {
				  const date = new Date(timestamp);
				  date.setMilliseconds(0);  // 精确到秒
				
				  // 获取年、月、日、时、分、秒
				  const offset = 8;
				  const year = date.getUTCFullYear();
				  const month = String(date.getUTCMonth() + 1).padStart(2, '0');  // 月份从0开始，所以加1
				  const day = String(date.getUTCDate()).padStart(2, '0');
				  const hours = String(date.getUTCHours()+offset).padStart(2, '0');
				  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
				  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
				
				  // 格式化为 `YYYY:MM:DD:HH:mm:ss`
				  const formattedDate = `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`;
				  console.log(formattedDate);  // 输出：2024:10:12:14:00:01
				  return formattedDate
				}
			},
			getDate(res){
				
				console.log(res.date)
				this.date = res.date
				console.log("选择时间:")
				console.log(this.date)
				this.getTasks(this.date)
				
			},
			getTasks(date){
				request(`/inspection/search/${this.userInfo.userId}`, 'POST', {
					"startTime": date,
					"endTime": date,
					"searchUserId": this.userInfo.role == 1 ? -1 : this.userInfo.userId,
					"mapId": -1,
				}).then(res => {
					console.log("查询任务数据完成：")
					console.log(res)
					this.taskList = res.data.data
				})
			},
			curDate(){
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				// if (type === 'start') {
				// 	year = year - 5;
				// } else if (type === 'end') {
				// 	year = year;
				// }
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			goToTaskInfo(task){
				let schedule = task.inspectionWork.inspectionWorkFinish + '/' + task.inspectionWork.inspectionWorkNumber
				uni.navigateTo({
					url: `/pages/taskManage/taskInfo/taskInfo?name=${task.inspectionWork.inspectionWorkName}&status=${task.inspectionWork.inspectionWorkStatus}&schedule=${schedule}&startTime=${task.inspectionWork.inspectionStartTime}&limitTime=${task.inspectionWork.inspectionLimitTime}&finishTime=${task.inspectionWork.inspectionEndTime}&mapId=${task.map.mapId}&mapName=${task.map.mapName}&inspectionWorkId=${task.inspectionWork.inspectionWorkId}`
				})
			}
		},
		onReady(){
			// uni.hideTabBar()
			
		}
	}
</script>

<style scoped>
.task-body {
		margin-top: 30px;
	}

	.task-content {
		padding-bottom: 20px;
		display: flex;
		padding: 20px;
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
	}

	.task-left {
		display: flex;
		flex-direction: column;
		width: 80%;
	}

	.task-name {
		font-size: 25px;
	}

	.task-botom {
		display: flex;
	}

	.task-schedule {
		text-align: left;
		align-self: center;
		width: 50%;
	}

	.task-time {
		font-size: 10px;
	}

	.task-right {
		align-self: center;
	}

	.tips {
		text-align: center;
		color: gray;
	}

	.select {
		width: 50%;
		margin-left: 10px;
		height: 28px;
	}

	.select1 {
		width: 50%;
		margin-left: 10px;
		height: 28px;
	}

	.confirm {
		background-color: #fff;
		width: 100%;
		height: 28px;
		display: flex;
		justify-content: left;
		font-size: 15px;
		align-items: center;
	}
	.task-status{
		margin-bottom: 10px;
		display: flex;
	}
</style>
